<template>
  <up-tabbar
    :value="activeTab"
    @change="change"
    :fixed="true"
    :placeholder="false"
    activeColor="#978efb"
    inactive-color="#7A7E83"
    :safeAreaInsetBottom="true">
    <up-tabbar-item :key="i.name" :text="i.text" v-for="i in tabList">
      <template #active-icon>
        <view>
          <image style="height: 20px; width: 20px" :src="i.activeIcon"></image>
        </view>
      </template>
      <template #inactive-icon>
        <view>
          <image
            style="height: 20px; width: 20px"
            :src="i.InActiveIcon"></image>
        </view>
      </template>
    </up-tabbar-item>
  </up-tabbar>
</template>

<script setup>
let activeTab = ref();
activeTab.value = uni.getStorageSync("activeTab")
  ? uni.getStorageSync("activeTab")
  : 0;
let tabList = ref([
  {
    text: "Ai咨询",
    activeIcon: "../static/tab/aiConsult_cur.png",
    InActiveIcon: "../static/tab/aiConsult.png",
    path: "/pages/index/index",
  },
  {
    text: "育儿心经",
    activeIcon: "../static/tab/aiConsult_cur.png",
    InActiveIcon: "../static/tab/aiConsult.png",
    path: "/pages/article/article",
  },
  {
    text: "我的",
    activeIcon: "../static/tab/aiConsult_cur.png",
    InActiveIcon: "../static/tab/aiConsult.png",
    path: "/pages/my/my",
  },
]);

let change = (e) => {
  uni.setStorageSync("activeTab", e);
  uni.switchTab({
    url: tabList.value[e].path,
  });
};
</script>

<style></style>
